<template>
  <div class="page page-role">
    <!-- 查询 -->

    <el-form
      slot="search"
      :inline="true"
      class="search-form"
      label-width="80px"
      @submit.native.prevent
    >
      <el-form-item class="search-btn">
        <el-button v-waves type="primary" @click="openXM" size="mini"
          >新增</el-button
        >
      </el-form-item>
      <el-form-item label="code">
        <el-input
          v-model="form.code"
          placeholder="请输入code"
          clearable
          @change="changeList"
          @clear="changeList"
        />
      </el-form-item>
      <el-form-item label="产品名">
        <el-input
          v-model="form.consoleType"
          placeholder="请输入产品名"
          clearable
          @change="changeList"
          @clear="changeList"
        />
      </el-form-item>
      <el-form-item label="工位">
        <el-select
          v-model="form.station"
          placeholder="请选择工位"
          clearable
          filterable
          @change="changeList"
          @clear="changeList"
        >
          <el-option
            v-for="(item, idx) in stationList"
            :key="idx"
            :value="item.id"
            :label="item.name"
          >
            <span style="color: #2761db">{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="form.toolType"
          placeholder="请输入类型"
          filterable
          clearable
          @change="getList"
          @clear="getList"
        >
          <el-option value="1" label="atlas" />
          <el-option value="2" label="马头" />
          <el-option value="3" label="CTL" />
          <el-option value="4" label="蒂森NVH" />
          <el-option value="5" label="蒂森终检台" />
          <el-option value="6" label="霍塔NVH" />
          <el-option value="7" label="霍塔终检台" />
          <el-option value="8" label="kistler" />
          <el-option value="9" label="巨一" />
          <el-option value="10" label="sph" />
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 展示 -->
    <el-table
      slot="table"
      ref="multipleTable"
      v-loading="tab_loading"
      width="100%"
      border
      :data="dataList"
      class="expand--table"
    >
      <el-table-column align="center" prop="code" label="code" />
      <el-table-column align="center" prop="testItem" label="测量值" />
      <el-table-column align="center" prop="nameValueK2101" label="名称值" />
      <el-table-column align="center" prop="lowValueK2110" label="下限值" />
      <el-table-column align="center" prop="highValueK2111" label="上限值" />
      <el-table-column align="center" prop="consoleType" label="产品名" />
      <el-table-column align="center" prop="toolType" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.toolType == 1" size="mini">atlas</el-tag>
          <el-tag v-if="scope.row.toolType == 2" size="mini">马头</el-tag>
          <el-tag v-if="scope.row.toolType == 3" size="mini">CTL</el-tag>
          <el-tag v-if="scope.row.toolType == 4" size="mini">蒂森NVH</el-tag>
          <el-tag v-if="scope.row.toolType == 5" size="mini">蒂森终检台</el-tag>
          <el-tag v-if="scope.row.toolType == 6" size="mini">霍塔NVH</el-tag>
          <el-tag v-if="scope.row.toolType == 7" size="mini">霍塔终检台</el-tag>
          <el-tag v-if="scope.row.toolType == 8" size="mini">kistler</el-tag>
          <el-tag v-if="scope.row.toolType == 9" size="mini">巨一</el-tag>
          <el-tag v-if="scope.row.toolType == 10" size="mini">sph</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cpkLevel" label="重要程度">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cpkLevel == 0" size="mini" type=""
            >次重要的</el-tag
          >
          <el-tag v-if="scope.row.cpkLevel == 1" size="mini" type=""
            >略重要的</el-tag
          >
          <el-tag v-if="scope.row.cpkLevel == 2" size="mini" type="success"
            >重要的</el-tag
          >
          <el-tag v-if="scope.row.cpkLevel == 3" size="mini" type="warning"
            >很重要的</el-tag
          >
          <el-tag v-if="scope.row.cpkLevel == 4" size="mini" type="danger"
            >关键的</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="station"
        :formatter="stationFormatter"
        label="工位"
      />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <c-button>
            <span @click="openXM(scope.row)">编辑</span>
            <span @click="handleDel(scope.row)" class="danger">删除</span>
          </c-button>
        </template>
      </el-table-column>
    </el-table>

    <br />
    <br />
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="pages.currentPage"
      :page-size="pages.size"
      layout="total, prev, pager, next, jumper"
      :total="pages.totalRow"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPrefer } from '@/api/historymsg'
import { list, deleteById } from '@/api/properties'
import AddEditUpAndLow from './XM/AddEditUpAndLow'
export default {
  components: {
    CButton: () => import('@/components/CButton'),
  },
  computed: {
    ...mapGetters(['btn_permission']),
  },
  props: {
    layerid: {
      default: 0,
    },
  },
  data() {
    return {
      pages: {
        currentPage: 1,
        size: 10,
        totalRow: 0,
      },
      tab_loading: false,
      form: {},
      dataList: [],
      stationList: [],
    }
  },
  created() {
    this.$getReset()
    this.getList()
    this.getAllPrefer()
  },
  methods: {
    async changeList(row) {
      console.warn(row)

      const obj = JSON.parse(JSON.stringify(this.form))

      let page = {
        page: 1,
        limit: this.pages.size,
      }

      Object.assign(obj, page)
      this.tab_loading = true
      const { data } = await list(obj)
      this.tab_loading = false

      this.dataList = data.data
      this.pages.currentPage = data.currentPage
      this.pages.totalPage = data.totalPage
      this.pages.totalRow = data.totalRow
    },
    async getAllPrefer() {
      await getPrefer().then((res) => {
        // console.warn(res.data);
        this.stationList = res.data
      })
    },
    /* 查询 */
    async getList() {
      const obj = JSON.parse(JSON.stringify(this.form))

      let page = {
        page: this.pages.currentPage,
        limit: this.pages.size,
      }

      Object.assign(obj, page)
      this.tab_loading = true
      const { data } = await list(obj)
      this.tab_loading = false

      this.dataList = data.data
      this.pages.currentPage = data.currentPage
      this.pages.totalPage = data.totalPage
      this.pages.totalRow = data.totalRow
    },
    /* 页码改变 */
    pageChange(param) {
      if (param.type === 'index') this.pages.page = param.val
      if (param.type === 'sizes') this.pages.pagesize = param.val
      this.getList()
    },
    /* 删除 */
    handleDel(row) {
      this.$confirm('确认删除此条记录?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await deleteById(row.id)
          if (res.status == 200) {
            this.$message({ message: '删除成功', type: 'success' })
            this.getList()
          }
        })
        .catch(() => {})
    },
    stationFormatter(row) {
      // console.warn(row);
      let name = undefined
      this.stationList.forEach((item) => {
        if (item.id == row.station) {
          name = item.name
        }
      })
      return name
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.pages.currentPage = val
      this.getList()
    },
    /* 添加和编辑 */
    openXM(row) {
      this.$layer.iframe({
        shadeClose: false,
        content: {
          content: AddEditUpAndLow,
          parent: this,
          data: { row: row },
        },
        maxmin: true,
        area: ['800px', '600px'],
        title: row.id ? '编辑上下限配置' : '添加上下限配置',
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
